<template>
  <div class="timeStatistical">
    <span>统计时间：</span>
    <div class="labelCheckList">
       <button v-for="($key, item) in timeList" :class="lastClickLabel == $key ? 'active': ''"  v-on:click="timeCheckList($key, $event,item.time)">
        {{ item.name }}
      </button>      
    </div>
  </div>
</template>
<script>
import { changeMsg } from '../vuex/action'
export default {
  data () {
    return {
      timeList:[{"name":"仅30天","time":"1"},{"name":"近6个月","time":"2"},{"name":"近1年","time":"3"}],
      lastClickLabel:''
    }
  },
  methods: {
    timeCheckList: function(elName, event,time) {
      this.lastClickLabel = elName; 
      this.changeMsg(time)
    }
  },
  vuex: {
    actions: {
      changeMsg: changeMsg
    }
  },
  ready(){
     this.lastClickLabel = "0";
  }
}
</script>

<style scoped>
div.timeStatistical{
  clear: both;
}
div.timeStatistical span {
  display: inline-block;
  font-size: 14px;
  color: #767E85; 
}
div.timeStatistical .labelCheckList {
  display: inline-block;
}
div.timeStatistical button {
    outline:none;
    margin-left: 8px;
    font: -webkit-mini-control;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 13px;
    min-width: 80px;
    color: #666;
    background-color: #fff;
}
div.timeStatistical button.active {
    color: #fff;
    background-color: #2ACDCF;
    border: none;
}
</style>
